/**
 * 流程名称区
 */
import { useForm } from "../../framework/common/context/metadata-context";
import { Button, Tooltip } from "antd";
import "./index.css";
import { useUpdate } from "ahooks";
import React, { Suspense, useEffect } from "react";
import { useSubscribe } from "../../framework/common/eventBus";
import { getProcessTitle } from "../../framework/common/utils";
import clsx from "clsx";
import PrintBtn from "./PrintBtn";
const BusinessBtn = React.lazy(() => import("./BusinessBtn1.js"));
function Title() {
  const form = useForm();

  const { data: tplData, params, mode,urlPrefix } = useForm().root;

  const isPrint =(mode==="Print")

  const updater = useUpdate();

  //流程标题更新事件
  function handleTitleChange(val) {
    console.log("handleTitleChange",val);
    form.data.ProcessInfo.Title = val.target.value;
    updater();
  }

  function refreshTitle({ form_data, params, tplData }) {
    if (tplData.ProcessInfo.TitleCanEdit == 0 && !tplData.ProcessInfo.IsAudit) {
      tplData.ProcessInfo.Title = getProcessTitle({
        form_data: form_data,
        params: params,
        tplData: tplData,
      });
      updater();
    }
  }
  //更新标题
  useSubscribe("refreshTitle.update", function (options) {
    refreshTitle({
      form_data: options?.form_data || tplData.form.form_data,
      params: options?.params || params,
      tplData: options?.tplData || tplData,
    }); //更新前端计算标题
  });

  useEffect(function () {
    if(!isPrint) //如果不是打印
      refreshTitle({ form_data: tplData.converted_form_data, params, tplData }); //更新前端计算标题
  }, []);

  return (
    <Tooltip overlayClassName="mytip" placement="bottomLeft" color="white" title={form.data?.ProcessInfo?.Title || ""} overlayStyle={{ maxWidth: "750px" }}>
      <input
        className="inline-block text-base truncate w-720px h-50px leading-50px main_title_wrap"
        readOnly={tplData.ProcessInfo.TitleCanEdit != 1 || isPrint} //!= 1 不可编 =1可编 打印模式也只读
        type="text"
        value={tplData.ProcessInfo?.Title || ""}
        onChange={handleTitleChange}
      />
    </Tooltip>
  );
}

export default function ({ loading, data, mode }) {
  let isApprove = "";
  let isPrint = "";

  //如果是审批页 并且不是只读页
  if (mode === 2 && data?.data?.tplData?.view_mode === false) {
    isApprove = "isApprove";
  }
  if (mode === 3) {
    isPrint = "isPrint";
  }

  if (isPrint) {
    return (
      <div id="header" className={clsx("noprint fixed left-0 top-0 text-white h-50px", isApprove, isPrint)}>
        <div className="relative h-full mx-auto w-1100px">
          {loading !== true && data !== undefined && (
            <>
              <Title></Title>
              <PrintBtn></PrintBtn>
            </>
          )}
        </div>
      </div>
    );
  }

  return (
    <div id="header" className={clsx("relative text-white h-50px", isApprove)}>
      <div className="relative h-full mx-auto w-1100px">
        {loading !== true && data !== undefined && (
          <>
            <div className="textLanternLeft"></div>
            <Title></Title>
            {/*流程标题左侧按钮*/}
            <Suspense fallback={null}><BusinessBtn></BusinessBtn></Suspense>
            <div className="textLanternRight"></div>
          </>
        )}
      </div>
    </div>
  );
}

